<template>
	<view class="personal-center">
		<!-- 用户信息卡片 -->
		<view class="user-card">
			<view class="user-info">
				<view class="avatar">
					<image v-if="userInfo.avatar_full" :src="userInfo.avatar_full" mode="aspectFill"></image>
					<image v-else src="/static/personalCenter/defalut-header.png" mode="aspectFill"></image>
				</view>
				<view v-if="isLoginFlag">
					<view class="nickname ellipsis">{{ userInfo.nickname }}</view>
					<view class="phone">{{ userInfo.phone }}</view>
					<view class="badge" v-if="userInfo.is_car_owner == 1">
						<image src="/static/personalCenter/auth.png" mode="aspectFill"></image>
						<text>认证车主</text>
					</view>
				</view>
				<view class="un-login-warps" v-else @click="handelLogin()">请先登录/注册</view>
			</view>

			<view class="credit" @click="navigateTo('/pages/personalCenter/creditValue/index')">
				<text>诚信值：{{ userInfo.honesty || 0 }}</text>
			</view>
		</view>

		<!-- 钱包明细 -->
		<view class="wallet-warps">
			<view class="wallet" @click="navigateTo('/pages/personalCenter/wallet/index')">
				<view class="title">我的钱包</view>
				<view class="detail-text">
					<text>详情</text>
					<image src="/static/personalCenter/details.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="wallet-detail">
				<view class="item">
					<text class="value">{{ userInfo.promotion_fee || 0 }}</text>
					<text class="label">到账推广费</text>
				</view>
				<view class="item">
					<text class="value">{{ userInfo.remain_deduction_fee || 0 }}</text>
					<text class="label">信息费抵扣额</text>
				</view>
			</view>
		</view>

		<!-- 功能列表 -->
		<view class="function-list">
			<view class="item" @click="handelAuth()">
				<view class="item-left-warps">
					<image src="/static/personalCenter/auth-icon.png" mode="aspectFill"></image>
					<text>车主认证</text>
				</view>
				<image class="right-details-icon" src="/static/personalCenter/details.png" mode="aspectFill"></image>
			</view>
			<view class="item" @click="navigateTo('/pages/personalCenter/trip/index')">
				<view class="item-left-warps">
					<image src="/static/personalCenter/trip.png" mode="aspectFill"></image>
					<text>我的行程</text>
				</view>
				<image class="right-details-icon" src="/static/personalCenter/details.png" mode="aspectFill"></image>
			</view>
			<view class="item" @click="navigateTo('/pages/personalCenter/promotion/index')">
				<view class="item-left-warps">
					<image src="/static/personalCenter/promotion.png" mode="aspectFill"></image>
					<text>我的推广</text>
				</view>
				<image class="right-details-icon" src="/static/personalCenter/details.png" mode="aspectFill"></image>
			</view>
			<view class="item" @click="onClickE">
				<view class="item-left-warps">
					<image src="/static/tg.png" mode="aspectFill"></image>
					<text>我的二维码</text>
				</view>
				<image class="right-details-icon" src="/static/personalCenter/details.png" mode="aspectFill"></image>
			</view>

			<view class="item" @click="navigateTo('/pages/personalCenter/evaluate/index?type=1')">
				<view class="item-left-warps">
					<image src="/static/personalCenter/evaluate.png" mode="aspectFill" style="width: 54rpx; height: 54rpx"></image>
					<text>我的评价</text>
				</view>
				<image class="right-details-icon" src="/static/personalCenter/details.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="function-list">
			<view class="item" @click="navigateTo('/pages/personalCenter/account/index')">
				<view class="item-left-warps">
					<image src="/static/personalCenter/account.png" mode="aspectFill"></image>
					<text>手机号管理</text>
				</view>

				<image class="right-details-icon" src="/static/personalCenter/details.png" mode="aspectFill"></image>
			</view>
			<view class="item" @click="navigateTo('/pages/personalCenter/coupon/index')">
				<view class="item-left-warps">
					<image src="/static/personalCenter/coupon.png" mode="aspectFill"></image>
					<text>乘客优惠券</text>
				</view>

				<image class="right-details-icon" src="/static/personalCenter/details.png" mode="aspectFill"></image>
			</view>
			<view class="item" @click="navigateTo('/pages/personalCenter/coupon/index2')">
				<view class="item-left-warps">
					<image src="/static/personalCenter/coupon.png" mode="aspectFill"></image>
					<text>车主优惠券</text>
				</view>

				<image class="right-details-icon" src="/static/personalCenter/details.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="function-list">
			<view class="item" @click="loginOut()">
				<view class="item-left-warps">
					<image src="/static/personalCenter/out.png" mode="aspectFill"></image>
					<text>退出登录</text>
				</view>
			</view>
			<view class="item" @click="navigateTo('/pages/personalCenter/onlineService/index')">
				<view class="item-left-warps">
					<image src="/static/personalCenter/customer.png" mode="aspectFill"></image>
					<text>在线客服</text>
				</view>
				<image class="right-details-icon" src="/static/personalCenter/details.png" mode="aspectFill"></image>
			</view>
			<view class="item" @click="navigateTo('/pages/personalCenter/helpCenter/index')">
				<view class="item-left-warps">
					<image src="/static/personalCenter/issue.png" mode="aspectFill" style="width: 54rpx; height: 54rpx"></image>
					<text>常见问题</text>
				</view>
				<image class="right-details-icon" src="/static/personalCenter/details.png" mode="aspectFill"></image>
			</view>
		</view>
		<!-- 客服热线 -->
		<view class="customer-service">
			客服热线：
			<text class="phone" @click="callHotline(servicePhone)">{{ servicePhone }}</text>
		</view>
		<auth-popup :visible.sync="showPopup" @select="handleSelect" />

		<share-flex-vue></share-flex-vue>

		<promotion-popup :visible.sync="tuiguangma" @update:visible="updateVisible" />
	</view>
</template>
<script>
import AuthPopup from './auth/auth-popup/auth-popup.vue';
import { isLoggedIn, checkLogin } from '@/utils/auth';
import promotionPopup from '@/pages/common/promotionPostersPopup.vue';
import { isEmpty } from '@/utils/util';
export default {
	components: {
		AuthPopup,
		promotionPopup
	},
	data() {
		return {
			showPopup: false,
			userInfo: {},
			isLoginFlag: false,
			servicePhone: '',
			tuiguangma: false
		};
	},
	onShow(options) {
		// 检查是否有从其他页面传递的参数
		this.checkSwitchTabParams();
		// 获取配置
		this.getConfig();
		if (isLoggedIn()) {
			this.getAuthInfoData();
		}
	},
	onLoad(options) {
		this.isLoginFlag = isLoggedIn();
		if (isLoggedIn()) {
			this.fetchUserInfo();
			this.getAuthInfoData();
		}
		// 检查是否有从其他页面传递的参数
		this.checkSwitchTabParams();
	},
	methods: {
		updateVisible() {
			this.tuiguangma = false;
		},
		onClickE() {
			if (!isLoggedIn()) {
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				});
				return;
			}
			this.tuiguangma = true;
		},
		// 获取认证信息
		async getAuthInfoData() {
			try {
				const data = await this.$http.get('/h5/user/carowner/authInfo');
				let resData = data.data;

				if (isEmpty(resData)) {
					uni.setStorageSync('is_auth', false);
				} else {
					this.authInfo = resData;
					uni.setStorageSync('is_auth', true);
				}
			} catch (error) {}
		},
		// 获取配置
		async getConfig() {
			try {
				const data = await this.$http.get('/h5/common/configByCode?code=service_tel');
				this.servicePhone = data.data[0].value;
			} catch (error) {}
		},
		// 检查 switchTab 传递的参数
		checkSwitchTabParams() {
			const params = uni.getStorageSync('switchTabParams');
			if (params) {
				// 根据参数执行相应逻辑
				if (params.from === 'released' && !params.id) {
					// 来自发布页面且未认证，显示认证弹窗
					this.showPopup = true;
				}

				// 清除参数，避免重复处理
				uni.removeStorageSync('switchTabParams');
			}
		},
		handelLogin() {
			uni.navigateTo({ url: `/pages/login/bindPhone` });
		},
		// 拨号
		callHotline(phoneNumber) {
			this.$makePhoneCall(phoneNumber, {
				success: () => {
					uni.showToast({ title: '正在拨号...', icon: 'none' });
				},
				fail: (err) => {
					uni.showToast({ title: '拨号失败: ' + err.errMsg, icon: 'none' });
				}
			});
		},
		// 获取用户信息
		async fetchUserInfo() {
			try {
				const data = await this.$http.get('/h5/user/me');
				this.userInfo = data.data.user;
				uni.setStorageSync('userInfo', data.data.user);
			} catch (error) {}
		},
		handelAuth() {
			// 检查登录在状态
			if (!checkLogin()) {
				return;
			}
			// 检查是否认证
			let isAuth = uni.getStorageSync('is_auth');
			if (!isAuth) {
				this.showPopup = true;
			} else {
				uni.navigateTo({ url: '/pages/personalCenter/auth/auditSate' });
			}
		},
		handleSelect(item) {
			uni.showToast({
				title: `您选择了: ${item}`,
				icon: 'none'
			});
			switch (item) {
				case 'non_operational':
					uni.navigateTo({ url: `/pages/personalCenter/auth/driver-auth?type=${1}` });
					break;
				case 'operational':
					uni.navigateTo({ url: `/pages/personalCenter/auth/driver-auth?type=${2}` });
					break;
			}
		},
		// 导航到指定页面
		navigateTo(url) {
			// 检查登录在状态
			if (!checkLogin()) {
				return;
			}
			uni.navigateTo({
				url: url
			});
		},
		// 退出登录
		loginOut() {
			uni.showModal({
				title: '提示',
				content: '是否退出登录',
				success: function (res) {
					if (res.confirm) {
						// uni.removeStorageSync('firstIosUrl');
						uni.removeStorageSync('userInfo');
						uni.removeStorageSync('token');
						uni.removeStorageSync('is_auth');
						uni.removeStorageSync('currentTripId');
						uni.removeStorageSync('lineOrdersArr');
						uni.removeStorageSync('lineOrderDetails');
						uni.removeStorageSync('switchTabParams');
						uni.reLaunch({
							url: '/pages/personalCenter/index'
						});
					} else if (res.cancel) {
					}
				}
			});
		}
	}
};
</script>
<style lang="scss" scoped>
/* 用户卡片 */
.user-card {
	height: 400rpx;
	display: flex;
	justify-content: space-between;
	background-image: url('~@/static/personalCenter/mark.png');
	background-size: 100% 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	padding: 40rpx 0 0 26rpx;
	margin-bottom: 20rpx;

	.user-info {
		display: flex;
	}

	.avatar {
		width: 128rpx;
		height: 128rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 16rpx;
	}

	.avatar image {
		width: 100%;
		height: 100%;
	}

	.info {
		flex: 1;
	}

	.nickname {
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 500;
		font-size: 40rpx;
		color: #ffffff;
		line-height: 48rpx;
		letter-spacing: 1px;
		margin-bottom: 12rpx;
	}

	.credit {
		width: 192rpx;
		height: 52rpx;
		background: #ffffff;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 400;
		font-size: 28rpx;
		color: #ff7937;
		line-height: 52rpx;
		text-align: center;
		border-radius: 60rpx 0 0 60rpx;
		padding-right: 14rpx;
		margin-top: 40rpx;
	}

	.phone {
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 400;
		font-size: 32rpx;
		color: #ffffff;
		line-height: 40rpx;
		margin-bottom: 12rpx;
	}

	.badge {
		width: 144rpx;
		height: 40rpx;
		background: #ff7937;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		text-align: center;
		line-height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.badge image {
		width: 24rpx;
		height: 24rpx;
		margin-right: 4rpx;
	}

	.badge text {
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 400;
		font-size: 24rpx;
		color: #ffffff;
		line-height: 40rpx;
	}

	// 未登录
	.un-login-warps {
		font-size: 28rpx;
		color: #ffffff;
		margin-top: 40rpx;
	}
}

.wallet-warps {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 20rpx 20rpx 44rpx 32rpx;
	margin: -220rpx 26rpx 0 24rpx;
	z-index: 100;
}

.wallet {
	display: flex;
	justify-content: space-between;
	padding-bottom: 20rpx;
	margin-bottom: 44rpx;
	border-bottom: 2rpx solid #eeeeee;
}

.wallet .title {
	font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
	font-weight: 700;
	font-size: 32rpx;
	color: #0b1f20;
	line-height: 44rpx;
}

.detail-text {
	display: flex;
	align-items: center;
}

.detail-text text {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 400;
	font-size: 24rpx;
	color: #999999;
	line-height: 36rpx;
}

.detail-text image {
	width: 28rpx;
	height: 28rpx;
}

/* 钱包明细 */
.wallet-detail {
	display: flex;
	justify-content: space-between;
	padding: 0 60rpx;
}

.wallet-detail .item {
	text-align: center;
}

.wallet-detail .label {
	display: block;
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 400;
	font-size: 28rpx;
	color: #999999;
	line-height: 40rpx;
	text-align: center;
}

.wallet-detail .value {
	font-family: DINPro, DINPro;
	font-weight: 500;
	font-size: 48rpx;
	color: #ff7937;
	line-height: 40rpx;
	text-align: center;
	display: inline-block;
	margin-bottom: 32rpx;
}

/* 功能列表 */
.function-list {
	background-color: #fff;
	border-radius: 16rpx;
	margin-bottom: 40rpx;
	padding: 56rpx 34rpx 56rpx 26rpx;
	margin: 20rpx 24rpx 20rpx 26rpx;
}

.item-left-warps {
	display: flex;
	align-items: center;
}

.item-left-warps image {
	width: 48rpx;
	height: 48rpx;
	margin-right: 36rpx;
}

.function-list .item {
	padding: 0rpx 0 26rpx 0;
	margin-bottom: 52rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 2rpx solid #eeeeee;
}

.right-details-icon {
	width: 32rpx;
	height: 32rpx;
}

.function-list .item:last-child {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}

/* 客服热线 */
.customer-service {
	text-align: center;
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-size: 28rpx;
	color: #999999;
	padding-bottom: 64rpx;
}

.customer-service .phone {
	color: #007aff;
}
</style>
